<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		function changetext(id){
			id.innerHTML="谢谢！";
		}

        function myFunction(){
        	var x=document.getElementById("fname");
        	x.value=x.value.toUpperCase();
        }
	</script>
</head>
<body onload="checkCookies()">
	<h1 onclick="changetext(this)" onmouseover="style.color='red'" onmouseout="style.color='blue'">请点击该文本</h1>

	<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
    <button id="myBtn">点击这里</button>
    <p id="demo"></p>

    <form>
    	请输入英文字符：
    	<input id="fname" type="text" name="" onchange="myFunction()" onfocus="oFocus(this)">
    </form>
    <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

    <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: green;width: 120px;height: 20px;padding:40px;color: #ffffff;">把鼠标移到上面</div>
    <br>
    <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

    <script type="text/javascript">
    	document.getElementById("myBtn").onclick=function(){displayDate()};
    	function displayDate(){
    		document.getElementById("demo").innerHTML=Date();
    	}

    	function checkCookies(){
    		if (navigator.cookieEnabled==true) {
    			alert("已启用cookie")
    		}
    		else{
    			alert("未启用cookie")
    		}
        }

    	function mOver(obj){
    		obj.innerHTML="谢谢！"
    	}

    	function mOut(obj){
    		obj.innerHTML="把鼠标移到上面"
    	}

    	function mDown(obj){
    		obj.style.backgroundColor="#1ec5e5";
    		obj.innerHTML="请释放鼠标按钮"
    	}

    	function mUp(obj){
    		obj.style.backgroundColor="green";
    		obj.innerHTML="请按下鼠标按钮"
    	}

    	function oFocus(x){
    		x.style.background="yellow";
    	}	
    </script>
    
</body>
</html>